<template>
    <div>
        <div class="crumbs">
            <el-breadcrumb>
                <el-breadcrumb-item>
                    <i class="el-icon-baseball"></i>资金持仓页面
                </el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <el-card class="container">
            <div>
                <el-breadcrumb-item style="margin-bottom: 20px">
                    <span>可用资金:</span>
                    <span>{{balance}}</span>
                </el-breadcrumb-item>
            </div>

            <el-table :data="tableData.slice((query.currentPage - 1) * query.pageSize,query.currentPage * query.pageSize)" style="width: 100%" border :cell-style="cellStyle" @sort-change="changeTabSort">
                <el-table-column prop="code" label="代码" width="180"  sortable :sort-orders="['ascending', 'descending']" align="center"/>
                <el-table-column prop="name" label="名称" width="180" align="center"/>
                <el-table-column prop="count" label="股票数量" align="center"/>
                <el-table-column prop="cost" label="总投入" align="center"/>
                <el-table-column label="成本" align="center"/>
            </el-table>
            <div class="pagination">
                <el-button round type="primary" size="mini" style="margin-top: 2px;float: right" icon="el-icon-refresh" @click=""></el-button>
                <el-pagination  background layout="total,prev,pager,next" :current-page="query.currentPage" :page-size="query.pageSize" :total="dataTotalCount" @current-change="handlerPageChange"/>
            </div>

        </el-card>

    </div>
</template>

<script>
    export default {
        name: "Dashboard",
        data(){
            return {
                tableData: [{
                    code: '60025',
                    name: '华智水电',
                    count: 100,
                    cost:20
                }, {
                    code: '50023',
                    name: '浦发银行',
                    count: 100,
                    cost:20
                }, {
                    code: '10001',
                    name: '贵州茅台',
                    count: 100,
                    cost:20
                }, {
                    code: '20032',
                    name: '华联集团',
                    count: 100,
                    cost:20
                }],
                balance:200,
                dataTotalCount:4,//总数
                query:{
                    currentPage:1,//当前页码
                    pageSize:2//每页显示多少条
                }

            }
        },
        methods:{
            handlerPageChange(val){
               this.$set(this.query,'currentPage' , val);
            },
            changeTabSort(column){
                if (column.order == 'descending'){
                    this.tableData = this.tableData.sort((a,b)=>{
                        b[column.prop] - a[column.prop]
                    })
                } else{
                    this.tableData = this.tableData.sort((a,b)=>{
                        a[column.prop] - b[column.prop]
                    })
                }
            },
            cellStyle({row,cloumn,rowIndex,cloumnIndex}){
                return "padding:2px"
            }
        }
    }
</script>

<style scoped>

</style>